<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" charset="utf-8" src="/writes/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="/writes/ueditor.all.js"> </script>
		<script src="/static/js/inout/jquery-1.8.2.min.js"></script>
	</head>

	<body>
		<div style="margin: 15px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>修改彩种</legend>
			</fieldset>

			<form class="layui-form" id="odds">
				<input type="hidden" name="banner" value="{$data.imgurl}" id="imgurl" />
				<input type="hidden" name="probleid" value="{$data.id}" id="probleid" />
				<div class="layui-form-item">
					<label class="layui-form-label">彩种名称</label>
					<div class="layui-input-block">
						<input type="text" name="title" lay-verify="" lay-search autocomplete="off" value="{$data.title}" placeholder="请输入彩种名 列如：重庆时时彩" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">彩种标题</label>
					<div class="layui-input-block">
						<input type="text" name="showName" lay-verify="" lay-search autocomplete="off" value="{$data.showName}" placeholder="请输入彩标题 列如：重庆时时彩详情" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="radio" name="enable" value="1" title="开" {if condition="$data.enable eq 1"}checked{/if}/>
						<input type="radio" name="enable" value="2" title="关" {if condition="$data.enable eq 2"}checked{/if}/>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">上传图片</label>
					<div class="layui-input-block">
						<!--用来存放item-->
						<div id="fileList" class="uploader-list">
							{if condition="$data.imgurl neq ''"}<img id="imgs" style="height: 100px;width:100px;" src="{$data.imgurl}"/>{/if}
						</div>
						<div id="filePicker">选择图片</div>
					</div>
				</div>
				<div class="layui-form-item" style="text-align: center;">
					<div class="layui-input-block">
						<button class="layui-btn" type="button" onclick="tijiao();">立即提交</button>
						<button type="button" class="layui-btn layui-btn-primary" onclick="fanhui();">返回</button>
					</div>
				</div>
			</form>
		</div>
		<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
		<link href="/static/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="/static/webuploader/0.1.5/webuploader.min.js"></script>
		<script>
			function fanhui(){
				window.history.go(-1);
			}
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form(),
						layer = layui.layer,
						layedit = layui.layedit,
						laydate = layui.laydate;

				//创建一个编辑器
				//var editIndex = layedit.build('LAY_demo_editor');
				//自定义验证规则

				//监听提交
			});
			$(function(){
				$.fn.serializeJson=function(otherString){
					var serializeObj={},
							array=this.serializeArray();
					$(array).each(function(){
						if(serializeObj[this.name]){
							serializeObj[this.name]+=';'+this.value;
						}else{
							serializeObj[this.name]=this.value;
						}
					});

					if(otherString!=undefined){
						var otherArray = otherString.split(';');
						$(otherArray).each(function(){
							var otherSplitArray = this.split(':');
							serializeObj[otherSplitArray[0]]=otherSplitArray[1];
						});
					}
					return serializeObj;
				};
				var ue = UE.getEditor('editor');
			});
			$("input[type=file]").change(function(){
				$("#imgsubmit").submit();
			});

			function tijiao(){
				var data = $('#odds').serializeJson();
				$.post('/admin/lottery/editlist',{
					data:data
				},function(res){
					if(res.status===0){
						layer.msg(res.msg);
						setTimeout('location.href="/admin/lottery/index"',1000);
					}else{
						layer.msg(res.msg);
					}
				});
			}

			$(function(){
				$list = $("#fileList"),
						$btn = $("#btn-star"),
						state = "pending",
						uploader;
				var uploader = WebUploader.create({
					auto: true,
					swf: '/static/webuploader/0.1.5/Uploader.swf',

					// 文件接收服务端。
					server: '/admin/problem/ajaxUpload',

					// 选择文件的按钮。可选。
					// 内部根据当前运行是创建，可能是input元素，也可能是flash.
					pick: '#filePicker',
					fileNumLimit: 1,

					// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
					resize: false,
					// 只允许选择图片文件。
					accept: {
						title: 'Images',
						extensions: 'gif,jpg,jpeg,bmp,png',
						mimeTypes: 'image/jpg'
					}
				});
				uploader.on( 'fileQueued', function( file ) {
					var $li = $(
									'<div id="' + file.id + '" class="item">' +
									'<div class="pic-box"><img></div>'+
									'<div class="info"></div>' +
									'<p class="state"></p>'+
									'</div>'
							),
							$img = $li.find('img');
					$list.append( $li );

					// 创建缩略图
					// 如果为非图片文件，可以不用调用此方法。
					// thumbnailWidth x thumbnailHeight 为 100 x 100
					uploader.makeThumb( file, function( error, src ) {
						if ( error ) {
							$img.replaceWith('<span>不能预览</span>');
							return;
						}

						$img.attr( 'src', src );
					}, 100, 100);
				});
				// 文件上传过程中创建进度条实时显示。
				uploader.on( 'uploadProgress', function( file, percentage ) {
					var $li = $( '#'+file.id ),
							$percent = $li.find('.progress-box .sr-only');

					// 避免重复创建
					if ( !$percent.length ) {
						$percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
					}
					$percent.css( 'width', percentage * 100 + '%' );
				});

				// 文件上传成功，给item添加成功class, 用样式标记上传成功。
				uploader.on( 'uploadSuccess', function( file ,response) {
					if(response.status==1){
						$('#imgurl').val(response.url);
					}else{
						layer.msg(response.msg);
					}
				});

				// 文件上传失败，显示上传出错。
				uploader.on( 'uploadError', function( file ) {
					$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
				});

				// 完成上传完了，成功或者失败，先删除进度条。
				uploader.on( 'uploadComplete', function( file ) {
					$( '#'+file.id ).find('.progress-box').fadeOut();
				});
				uploader.on('all', function (type) {
					if (type === 'startUpload') {
						state = 'uploading';
					} else if (type === 'stopUpload') {
						state = 'paused';
					} else if (type === 'uploadFinished') {
						state = 'done';
					}

					if (state === 'uploading') {
						$btn.text('暂停上传');
					} else {
						$btn.text('开始上传');
					}
				});

				$btn.on('click', function () {
					if (state === 'uploading') {
						uploader.stop();
					} else {
						uploader.upload();
					}
				});
			});
		</script>
	</body>

</html>